<template>
<div>
  <ConfigTable
    ref="table"
    :column="column"
    :immediately="false"
    :tableData="tableData"
    :beforeRequest="beforeRequest"
    :request="request"
    :isVirtualScrollBar="true"
    :slotHeader="slotHeader"
  />
  <el-button @click="refresh">重新加载表格</el-button>
</div>
</template>
<script setup lang="tsx">
import ConfigTable from '@/components/configTable/index.vue'
const table = ref()
const tableData = ref<any>([]) // 表格数据
function ajax (): void {
  table.value.showLoading = true
  setTimeout(() => {
    table.value.showLoading = false
    tableData.value = Array.from({ length: 12 }).map((ele, index) => {
      return {
        index: index,
        date: '2024-04-' + Math.floor(Math.random() * 10),
        state: 1,
        name: '小星' + index,
        p1: index,
        p2: index
      }
    })
  }, 1000)
}
const request = reactive({ path: '/src/api/user/index.ts', name: 'loginApi' })
// 自定义表头
const slotHeader = (data:any) => {
  if ((data as any).row.property === 'name') {
    return <div>自定义名称</div>
  }
  return (data as any).row.label
}
// 表格组件
const column = computed(() => {
  const items = [
    { key: 'index', title: '序号', width: '300px' },
    { key: 'state', title: '状态', width: '500px', dict: { key: 'STATE_TYPE', path: 'user' }},
    {
      key: 'date',
      title: '日期',
      width: '500px',
      formatter: (row: object, _column: object, cellValue:any) => {
        return <div style="color: blue;">{cellValue}</div>
      }
    },
    {
      key: 'name',
      title: '名称',
      tip: '这是名称的提示',
      width: '500px'
    },
    {
      key: 'p1',
      title: 'p1',
      width: '500px'
    },
    {
      key: 'p2',
      title: 'p2',
      width: '500px'
    }
  ]
  return items
})
// 刷新数据
function refresh (): void {
  table.value.refresh()
}
function beforeRequest () {
  return { number: 2 }
}
onMounted(() => {
  ajax()
})
</script>
